<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-remove="handleRemoveTab" @tab-click="handleClickTab">
      <!-- ---------------------------------左侧选项卡----------------------------------------- -->
      <el-tab-pane label="维修工单" name="1">
        <content-left v-if="activeName == '1'" @click_create_receptiondate="handleReceptiondate" />
      </el-tab-pane>
      <!-- ---------------------------------右侧选项卡----------------------------------------- -->
      <el-tab-pane label="我的维修" name="2">
        <content-right ref="iscond" v-if="activeName == '2'" @click_create_receptiondate="handleReceptiondate" />
      </el-tab-pane>
      <!-- ---------------------------------设备报修详情选项卡----------------------------------------- -->
      <el-tab-pane closable label="设备报修详情" name="3" v-if="flag">
        <content-detail v-if="activeName == '3'" :parentid="consumableBaseId" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import contentLeft from './contener-left'
import contentRight from './contener-right'
import contentDetail from './contener-detail'
export default {
  name: 'ItemList',
  /** 可选：表单组件，操作栏组件，抽屉组件 */
  components: {
    contentLeft,
    contentDetail,
    contentRight
  },
  data () {
    return {
      activeName: '1',
      activeNameClick: '1',
      flag: false,
      consumableBaseId: '',//基值 ID
    }
  },
  watch: {
    activeName (val) {
      if (val != '2') {
        if (this.$route.query.isCondition) {
          this.$route.query.isCondition = undefined
        }
      }
    }
  },
  computed: {
    isCondition: {
      get () {
        return this.$store.state.user.isCondition
      }
    },

  },
  created () {
    this.activeName = this.isCondition
    // console.log(this.isCondition, this.$route.query.isCondition);
    if (this.isCondition === '2') {
      // this.activeName = '2'
      setTimeout(() => {
        this.$refs['iscond'].$refs['pagination_table'].handleQuery({ repairStatus: '0' });
      }, 500);
    }
  },
  mounted () {
    if (this.$route.query.sourceId) {//存在详情id则进入直接进入详情界面
      this.activeName = '3'
      this.flag = true
      this.consumableBaseId = this.$route.query.sourceId * 1
    }
  },
  methods: {
    handleRemoveTab (val) {
      if (val == 3) {
        this.flag = false
      }
      this.activeName = this.activeNameClick
    },
    // 点击tab标签
    handleClickTab (val) {
      if (val.name == '3') {
        return
      } else {
        this.activeNameClick = val.name
      }
      this.flag = false

    },
    // 接收子级传上来的 基值 ID
    handleReceptiondate (id) {
      this.flag = true
      this.activeName = '3'
      this.consumableBaseId = id * 1
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-tabs__content {
  padding: 0;
}
</style>
